<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英雄联盟官网</title>
    <style>
        a:hover {
            color: #04a1c3;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: #eeeeee;
        }

        a {
            text-decoration: none;
        }

        .head {
            width: 100%;
            height: 360px;
            /* background-color: pink; */
            /* text-align: center; */
            background-image: url(img/yxlm.jpg);
            background-repeat: no-repeat;
            background-position: center 0;
            /* background-attachment: local; */
            margin: 0;
        }

        .head_nav {
            width: 80%;
            height: 78px;
            /* background-color: black; */
            /* color: black; */
            margin: 0 auto;
            box-sizing: border-box;
            /* margin-left: 30px; */
            /* padding-top: 10px; */
            /* display: inline-block */
            /* background-color: black; */
            max-width: 1358px;
            min-width: 1230px;
            /* background-color: rgb(151, 140, 140); */
            /* color:white; */
        }

        .head_nav_right {
            width: 250px;
            float: right;
        }

        .logo_img {
            float: left;
        }

        .title {
            width: 10%;
            height: 62px;
            float: left;
            /* margin: 0 auto; */
            padding-top: 16px;
            /* font-size: 18px; */
        }

        .title_span1 {
            font-size: 20px;
            color: black;
            text-align: center;
            display: block;

        }

        .title_span2 {
            display: block;
            color: rgb(46, 43, 43);
            font-size: 13px;
            margin-top: -1px;
            letter-spacing: 1px;
            text-align: center;

        }

        .head_right_wecome {
            float: right;
            /* text-align: center; */
            margin: 0;
            font-size: 18px;
        }

        .logic {

            float: right;
            /* text-align: center; */
            margin: 0;
            font-size: 18px;
            /* position: absolute; */
            color: black;
        }

        .nav_right_img {
            width: 49px;
            height: 49px;
            /* display: inline-block; */
            /* vertical-align: middle; */
            /* left: 200px; */
            /* margin: 10px; */
            position: absolute;
            top: 10px;
        }

        .content-1 {
            display: block;
            height: 1050px;
            width: 80%;
            max-width: 1358px;
            min-width: 1358px;
            /* background-color: pink; */
            padding: 40px 0 80px 0;
            margin: 0 auto;
            background-color: #eeeeee;


        }

        .content-1-left {
            width: 820px;
            height: 380px;
            float: left;
        }

        .content-1-right {
            width: 496px;
            height: 380px;
            float: right;
            background-color: #eeeeee;

        }

        .content-1-right-nav {
            width: 596px;
            height: 35px;
            left: 0;

        }

        .content-1-right-nav-title {
            width: auto;
            height: 37px;
            margin-right: 74px;
            font-size: 18px;
            /* font-weight: 700px; */

        }

        .content-1-right-main {
            width: 496px;
            height: 305px;
            /* background-color: teal; */
            /* color: #0DA0B4; */
            /* background-color: #eeeeee; */


        }

        .content-1-right-topnew {
            height: 59px;
            text-align: center;
            line-height: 59px;
            font-size: 22px;
            font-weight: bold;
            color: #0DA0B4;

        }

        .content-1-right-news {
            height: 41px;
            background-color: #eeeeee;

        }

        .content-1-right-foot {
            width: 496px;
            height: 40px;
            background-color: #E3E2E2;
            text-align: center;
            line-height: 40px;
        }

        .icon-video {
            color: #e9852d;
            border: 1px #e9852d solid;
            font-size: 12px;
            line-height: 18px;
            text-align: center;
        }

        .icon-notice {
            color: #bb9a6c;
            border: 1px #c5ab86 solid;
            font-size: 12px;

        }

        .content-1-left-foot {
            width: 820px;
            height: 40px;
            text-align: center;
        }

        .c-l-t-text {
            display: block;
            width: 20%;
            text-align: center;
            margin: 0;
            padding: 0;
            line-height: 40px;
            font-size: 14px;
            float: left;
            background-color: #F5DEB3;
            color: black;
            /* border: 2px solid #CEA861; */
            /* text-decoration: #CEA861; */

        }

        .c-l-t-text:hover {
            color: #04a1c3;
        }

        .news-time {
            float: right;
            margin-right: 5px;
        }

        .news-item {
            color: black;
            margin-left: 10px;
        }

        .news-item:hover {
            color: #04a1c3;
        }

        .content-2-act {
            width: 820px;
            height: 335px;
            float: left;
            margin-top: 50px;


        }

        .act-top-title {
            width: 100%;
            height: 35px;
            /* background-color: white; */
            margin: 0;
        }

        .top-h2 {
            /* display: inine-block; */
            width: 700px;
            line-height: 28px;
            font-weight: 400;
            margin: 0;
            float: left;
        }

        .top-h2::before {
            content: '\0020';
            background-color: #1da6ba;
            width: 4px;
            height: 28px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
        }

        .top-a {
            /* display: inline-block; */
            float: right;
            color: #7ea1a6;
        }

        .act-list {
            display: block;
            width: 820px;
            height: 278px;
            margin-top: 21px;
        }

        .act-item {
            float: left;
            width: 23%;
            height: 100%;
            margin: 0;
            margin-right: 16px;
        }

        .act-item-a {
            margin-left: 10px;
            color: black;
        }

        .act-item-a:hover {
            color: #04a1c3;
        }

        .hot-hero {
            width: 496px;
            height: 625px;
            float: right;
            margin-top: 50px;
        }

        .hot-h2 {
            width: 350px;
            line-height: 28px;
            font-weight: 400;
            margin: 0;
            float: left;
        }

        .hot-h2::before {
            content: '\0020';
            background-color: #1da6ba;
            width: 4px;
            height: 28px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
        }

        .hot-a {
            /* display: inline-block; */
            float: right;
            color: #7ea1a6;
            float: right;
        }

        .hero-item {
            width: 496px;
            height: 625px;
            /* background-color: coral; */
            margin-top: 50px;
        }

        .hero-s {
            margin-top: 5px;
            display: inline-block;
            width: 121px;
            height: 120px;
        }

        .hero-s img:hover {
            width: 130px;
            height: 130px;
        }

        .VideoCenter {
            width: 820px;
            height: 300px;
            /* background-color: pink; */
            /* display: inline-block; */
            /* border: chartreuse 2px solid; */
            width: 820px;
            height: 335px;
            float: left;
            /* margin-top: 50px; */
        }


        .VideoTop {
            width: 100%;
            height: 35px;
            /* background-color: white; */
            margin: 0;
        }

        .VideoTopLeft {
            float: left;
            width: 700px;
            line-height: 28px;
            font-weight: 400;
            margin: 0;
        }

        .VideoTop-h2 {
            width: 700px;
            line-height: 28px;
            font-weight: 400;
            margin: 0;
            float: left;

        }

        .VideoTop-h2::before {
            content: '\0020';
            background-color: #1da6ba;
            width: 4px;
            height: 28px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
        }

        .VideoTop-a {
            float: right;
            color: #7ea1a6;
        }

        .VideoContent {
            width: 820px;
            height: 268px;
            margin-top: 21px;
            display: block;
        }

        .Video-item {
            /* background-color: pink; */
            width: 22%;
            height: 100%;
            float: left;
            margin-right: 10px;
            margin-left: 10px;
        }

        .Video-itemImg {
            width: 181px;
            height: 268px;
        }

        .VideoImg-H4 {
            font-size: 16px;
            font-weight: 700;
            text-align: center;
            color: #fff;
            width: 100%;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            position: absolute;
            left: 0;
            top: 140px;
            float: left;
        }

        .footer {
            height: 50px;
            max-width: 1520px;
            min-width: 1520px;
            background-color: greenyellow;
            text-align: center;
            line-height: 50px;
            margin: 0 auto;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <div class="head">
        <div class="head_nav">
            <a href="https://lol.qq.com/data/info-heros.shtml">
                <img src="img/logo.png" class="logo_img" alt="">
            </a>
            <div class="title">
                <a href="https://lol.qq.com/data/info-heros.shtml">
                    <span class="title_span1">游戏资料</span>
                    <span class="title_span2">GAME INFO</span>
                </a>
            </div>
            <div class="title">
                <span class="title_span1">商城/合作</span>
                <span class="title_span2">STORE</span>
            </div>
            <div class="title">
                <span class="title_span1">社区互动</span>
                <span class="title_span2">COMUNITY</span>
            </div>
            <div class="title">
                <a href="https://lpl.qq.com/">
                    <span class="title_span1">赛事官网</span>
                    <span class="title_span2">ESPORTS</span>
                </a>

            </div>
            <div class="title">
                <span class="title_span1">自助系统</span>
                <span class="title_span2">SYSTEM</span>
            </div>
            <div class="head_nav_right">
                <a href="">
                    <img src="img/logo2.png" class="nav_right_img" alt="">
                </a>
                <div class="head_right_wecome">
                    <p>
                        亲爱的召唤师，欢迎
                        <a href="https://lol.qq.com/main.shtml" class="logic">登录</a>
                    </p>
                </div>
            </div>
        </div>

    </div>
    <div class="content-1">
        <div class="content-1-left">
            <a href="https://daoju.qq.com/lol/list/shoppinglist.shtml?e_code=500130" class="c-r-img">
                <img src="img/zdpf.jpg" alt="">
            </a>
            <div class="content-1-l-foot">
                <a href="#" class="c-l-t-text">战队皮肤限时销售</a>
                <a href="#" class="c-l-t-text">至臻终章2020</a>
                <a href="#" class="c-l-t-text">女帝无双通行证</a>
                <a href="#" class="c-l-t-text">答谢季·盟牙有礼</a>
                <a href="#" class="c-l-t-text">永恒之森</a>
            </div>
        </div>
        <div class="content-1-right">
            <div class="content-1-right-nav">
                <span class="content-1-right-nav-title">综合</span>
                <span class="content-1-right-nav-title">公告</span>
                <span class="content-1-right-nav-title">赛事</span>
                <span class="content-1-right-nav-title">赛事</span>
                <span class="content-1-right-nav-title">社区</span>
            </div>
            <div class="content-1-right-main">
                <div class="content-1-right-topnew">恭喜TES夺得2020德玛西亚杯冠军!</div>
                <div class="content-1-right-news">
                    <span class="icon-notice">公告</span>
                    <a href="https://web-static.palwo.com/test/a20200421weekfree/index.html?siteId=481&docid=461223797938065255"
                        class="news-item">
                        12月25日免费英雄更换公告</a>
                    <span class="news-time">12-23</span>
                </div>
                <div class="content-1-right-news">
                    <span class="icon-video">视频</span>
                    <a href="#" class="news-item">2020德玛西亚杯决赛宣传片:英雄,决赛之路</a>
                    <span class="news-time">12-27</span>
                </div>
                <div class="content-1-right-news">
                    <span class="icon-video">视频</span>
                    <a href="#" class="news-item">2020德玛西亚杯宣传片:英雄,不问出处</a>
                    <span class="news-time">12-27</span>
                </div>
                <div class="content-1-right-news">
                    <span class="icon-notice">公告</span>
                    <a href="#" class="news-item">至臻终章2020活动说明</a>
                    <span class="news-time">12-23</span>
                </div>
                <div class="content-1-right-news">
                    <span class="icon-notice">公告</span>
                    <a href="#" class="news-item">游戏环境公示及处罚名单12月18日</a>
                    <span class="news-time">12-18</span>
                </div>
                <div class="content-1-right-news">
                    <span class="icon-video">视频</span>
                    <a href="#" class="news-item">掌盟看德杯:解说十一带你直击德杯现场</a>
                    <span class="news-time">12-27</span>
                </div>
            </div>
            <div class="content-1-right-foot">阅读更多最新资讯</div>
        </div>
        <!-- 热门活动 -->
        <div class="content-2-act">
            <div class="act-top-title">
                <h2 class="top-h2">
                    热门活动
                </h2>
                <a href="#" class="top-a">更多活动=></a>
            </div>
            <div class="act-list">
                <div class="act-item">
                    <span>
                        <img src="./img/xxyx.webp" alt="">
                    </span>
                    <a href="#" class="act-item-a">K/DA系列 小小英雄</a>
                </div>
                <div class="act-item">
                    <span>
                        <img src="./img/shz.webp" alt="">
                    </span>
                    <a href="#" class="act-item-a">守护者公益计划</a>

                </div>
                <div class="act-item">
                    <span>
                        <img src="./img/zzzz.webp" alt="">
                    </span>
                    <a href="#" class="act-item-a">至臻终章2020</a>

                </div>
                <div class="act-item">
                    <span>
                        <img src="./img/yhxb.webp" alt="">
                    </span>
                    <a href="#" class="act-item-a">英雄联盟：永恒星碑</a>

                </div>
            </div>
        </div>
        <!-- 热门英雄 -->
        <div class="hot-hero">
            <div class="hot-top">
                <h2 class="hot-h2">
                    热门英雄
                </h2>
                <a href="#" class="hot-a">更多英雄=></a>

            </div>
            <div class="hero-item">
                <div class="hero-s">
                    <a href="#"> <img src="./img/Annie.png" alt=""></a>
                </div>
                <div class="hero-s">
                    <a href="#"><img src="./img/jla.png" alt=""></a>
                </div>
                <div class="hero-s">
                    <a href="#"><img src="./img/zx.png" alt=""></a>
                </div>
                <div class="hero-s">
                    <a href="#"><img src="./img/lfl.png" alt=""></a>
                </div>
                <div class="hero-s">
                    <a href=""><img src="./img/dmei.png" alt=""></a>
                </div>
                <div class="hero-s">
                    <a href=""><img src="./img/Shaco.png" alt=""></a>
                </div>
                <div class="hero-s">
                    <a href=""><img src="./img/nk.png" alt=""></a>
                </div>
                <div class="hero-s">
                    <a href=""><img src="./img/Riven.png" alt=""></a>
                </div>
                <div class="hero-s">
                    <a href=""><img src="./img/Sett.png" alt=""></a>
                </div>
                <div class="hero-s">
                    <a href=""><img src="./img/Yuumi.png" alt=""></a>
                </div>
                <div class="hero-s">
                    <a href=""><img src="./img/Yasuo.png" alt=""></a>
                </div>
                <div class="hero-s">
                    <a href=""><img src="./img/ez.png" alt=""></a>
                </div>
                <div class="hero-s">
                    <a href=""><img src="./img/jm.png" alt=""></a>
                </div>
                <div class="hero-s">
                    <a href=""><img src="./img/LeeSin.png" alt=""></a>
                </div>
                <div class="hero-s">
                    <a href=""><img src="./img/Seraphine.png" alt=""></a>
                </div>
                <div class="hero-s">
                    <a href=""><img src="./img/jla.png" alt=""></a>
                </div>

            </div>
        </div>
        <!-- 视频中心 -->
        <div class="VideoCenter">
            <div class="VideoTop">
                <h2 class="VideoTop-h2">视频中心</h2>
                <a href="#" class="VideoTop-a ">更多视频=></a>
            </div>
            <div class="VideoContent">
                <div class="Video-item">
                    <span>
                        <img src="img/v1.jpg" alt="" class="Video-itemImg">
                        <!-- <h4 class="VideoImg-H4">小鱼Top5</h4> -->
                    </span>
                </div>
                <div class="Video-item">
                    <span>
                        <img src="img/v2.jpg" alt="" class="Video-itemImg">
                    </span>
                </div>
                <div class="Video-item">
                    <span>
                        <img src="img/v3.jpg" alt="" class="Video-itemImg">
                    </span>
                </div>
                <div class="Video-item">
                    <span>
                        <img src="img/v4.jpg" alt="" class="Video-itemImg">
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        软件Q181 黄业帝 杰普实训一302教室
        <!-- <marquee behavior="scrollamout" scrollamount="25" direction="" scrollamout = "10000">软件Q181 黄业帝 杰普实训一302教室</marquee> -->
    </div>
</body>

</html>